<template>
  <BaseText color="soft" class="base-sort" @click="onChange">
    <BaseText :is-primary="isChecked">{{ label }}</BaseText>
    <span class="base-sort__arrow">
      <BaseText class="base-sort__up" is-icon name="play" :is-primary="isUp" />
      <BaseText
        class="base-sort__down"
        is-icon
        name="play"
        :is-primary="isDown"
      />
    </span>
  </BaseText>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  modelValue: Number,
  label: {
    type: String,
    default: "排序",
  },
});
const emits = defineEmits(["update:modelValue"]);

const isUp = computed(() => {
  return props.modelValue === 1;
});
const isDown = computed(() => {
  return props.modelValue === -1;
});
const isChecked = computed(() => {
  return isUp.value || isDown.value;
});

const onChange = () => {
  if (!isChecked.value) {
    emits("update:modelValue", 1);
  } else if (isUp.value) {
    emits("update:modelValue", -1);
  } else {
    emits("update:modelValue", 0);
  }
};
</script>

<style lang="scss" scoped>
.base-sort {
  display: inline-flex;

  &__arrow {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0.2em 0;
    font-size: 0.8em;
  }

  &__up {
    transform: rotate(-90deg);
    line-height: 0.6;
  }
  &__down {
    transform: rotate(90deg);
    line-height: 0.6;
  }
}
</style>
